<template>
  <div class="container" style="height: 940rpx">
    <div class="title">
      <h2>制作一线名师亲临面授<br />让学员梦想扬帆起航</h2>
      <p class="f-title">时光新影教育每位导师现场教学，及时解答学员疑问</p>
    </div>
    <div class="classroom-list">
      <ul>
        <li><img src="@/assets/teacher/t1.jpg" alt="" /></li>
        <li><img src="@/assets/teacher/t2.jpg" alt="" /></li>
        <li><img src="@/assets/teacher/t3.jpg" alt="" /></li>
        <li><img src="@/assets/teacher/t4.jpg" alt="" /></li>
      </ul>
    </div>
    <div class="more-btn">查看更多教学现场</div>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.classroom-list {
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
}
ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0;
  width: 100%;
  li {
    width: 48%;
    height: 220rpx;
    border: 1px solid #ddd;
    border-image: -webkit-linear-gradient(#9356ff, #fb0d5b) 20 20;
    border-image: -moz-linear-gradient(#9356ff, #fb0d5b) 20 20;
    border-image: -o-linear-gradient(#9356ff, #fb0d5b) 20 20;
    border-image: linear-gradient(#9356ff, #fb0d5b) 20 20;
    margin-bottom: 20rpx;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
